<template>
	<view class="body">
		<form @submit="formSubmit">
			<view class="face-wapper">
				<image src="../../static/image/default-face.png" class="face"></image>
			</view>
			
			<view class="info-wapper">
				<label class="words-lbl">手机号</label>
				<input name="username"  maxlength="11" @confirm="regPhone" @blur="regPhone" type="number" v-model="username" class="input" placeholder="请输入用户名" placeholder-class="graywords"/>
			</view>
			
			<view class="info-wapper" style="margin-top: 40upx;" v-if="loginType==0">
				<input type="text"  maxlength="4"  v-model="authcode" placeholder="请输入短信验证码" placeholder-style="color:#CCCCCC" placeholder-class="placecLass" />
				<view class="getYzm" :disabled="disabled" @tap="sendCode"><text>{{countdown}}</text><text v-if="timeStatus">s</text></view>
			</view>
			
			<view class="info-wapper" style="margin-top: 40upx;">
				<label class="words-lbl">密码</label>
				<input name="password" type="text" v-model="password" password="true" class="input" placeholder="请输入密码" placeholder-class="graywords"/>
			</view>
			
			<view class="info-wapper" style="margin-top: 40upx;" v-if="loginType==0">
				<label class="words-lbl">确认密码</label>
				<input name="password" type="text" v-model="confirmpassword" password="true" class="input" placeholder="请输入密码" placeholder-class="graywords"/>
			</view>
			
			<button type="primary" form-type="submit" style="margin-top: 60upx;width: 90%;">{{loginType==1?'登录':'注册'}}</button>
			<view class="method">
				<text class="btn login" @tap="changeMethod(1)">{{buttonText}}</text>
				<text class="btn register" @tap="changeMethod(0)">注册</text>
			</view>
		</form>
		
		
		<!-- 第三方登录H5不支持，所以隐藏掉 -->
		
	</view>
</template>


<script>
	export default {
		data() {
			return {
				// username:'13290906801',
				username:'',
				password:'',
				authcode: '',
				confirmpassword: '',
				loginType:1,
				buttonText:'忘记密码',
				countdown: '获取验证码',
				timeStatus: false, //s秒
				disabled: false //重新获取按钮是否开启
			};
		},
		methods: {
			// 验证手机号
			regPhone(){
				var reg = this.$common.isPhoneNumber(this.username);
				var msg = this.username?'请填写正确的手机号':'请填写手机号'
				console.log(reg);
				if(!reg){
					this.$common.errorToShow(msg)
					return false;
				}else{
					return true;
				}
			},
			//发送验证码
			sendCode() {
				if(this.timeStatus){
					return false;
				}
				if (!this.$common.isPhoneNumber(this.username)) {
					this.$common.errorToShow('请输入正确的手机号')
					return false;
				}
				const that = this
				that.$request('S1028', {
						'PHONENO': that.username
					},
					'POST',
					function(res) {
						if (res.data.CODE == 0) {
							that.$common.successToShow("发送成功")
							that.TimeBtn();
						}
					})
			},
			TimeBtn() {
				this.countdown = 60;
				this.timeStatus = true;
				let timer = setInterval(() => {
					--this.countdown
				}, 1000)
				setTimeout(() => {
					clearInterval(timer);
					this.timeStatus = false;
					this.countdown = '重新获取';
				}, 60000);
				if (this.countdown == '重新获取') {
					this.disabled = false
				} else {
					this.disabled = true
				}
				console.log(typeof(this.countdown));
			},
			changeMethod(val){
				
				if(this.loginType==1 && val==1){
					
					uni.navigateTo({
						url:"../registerLogin/forPhoneYes",
					})
				}else if(this.loginType==0 && val==1){
					this.buttonText = '忘记密码';
				}else {
					this.buttonText = '登录';
				}
				this.loginType = val;
			},
			appOAuthLogin(e) {
				var me = this;
				// 获取用户的登录类型
				var logintype = e.currentTarget.dataset.logintype;
				
				// 授权登录
				uni.login({
					provider: logintype,
					success(loginRes) {
						
						// 授权登录成功以后，获取用户的信息
						uni.getUserInfo({
							provider: logintype,
							success(info) {
								var userInfo = info.userInfo;
								var face = "";
								var nickname = "";
								var openIdOrUid = "";
								if (logintype == "weixin") {
									face = userInfo.avatarUrl;
									nickname = userInfo.nickName;
									openIdOrUid = userInfo.openId;
								} else if (logintype == "qq") {
									openIdOrUid = userInfo.openId;
									nickname = userInfo.nickname;
									face = userInfo.figureurl_qq_2;
								} else if (logintype == "sinaweibo") {
									openIdOrUid = userInfo.id;
									nickname = userInfo.nickname;
									face = userInfo.avatar_large;
								}
								
								// 调用开发者后台，执行一键注册或登录
								uni.request({
									url: me.serverUrl + "/appUnionLogin/" + logintype,
									data: {
										"openIdOrUid": openIdOrUid,
										"nickname": nickname,
										"face": face
									},
									method: "POST",
									success(result) {
										if (result.data.status == 200) {
											var userInfo = result.data.data;
											// 保存用户信息到全局的缓存中
											uni.setStorageSync("globalUser", userInfo);
											// 切换页面跳转，使用tab切换的api
											uni.switchTab({
												url: "../me/me"
											});
										}
									}
								})
								
							}
						})
						
					}
				});
			},
			// 实现在微信小程序端的微信登录
			wxLogin(e) {
				var me = this;
				// console.log(e);
				// 通过微信开发能力，获得微信用户的基本信息
				var userInfo = e.detail.userInfo;
				
				// 实现微信登录
				uni.login({
					provider: "weixin",
					success(loginResult) {
						// console.log(loginResult);
						// 获得微信登录的code：授权码
						var code = loginResult.code;
						// 设置登录到哪个对于的微信小程序，大家可以根据自己的后端去实现业务参数
						// [0:NEXT超英预告][1:超英预告][2:NEXT学院电影预告]
						var loginToWhichMP = 1;
						uni.request({
							url: me.serverUrl + "/mpWXLogin/" + code,
							data: {
								"avatarUrl": userInfo.avatarUrl,
								"nickName": userInfo.nickName,
								"whichMP": loginToWhichMP
							},
							method: "POST",
							success(userResult) {
								console.log(userResult);
								var userInfo = userResult.data.data;
								// 保存用户信息到全局的缓存中
								uni.setStorageSync("globalUser", userInfo);
								// 切换页面跳转，使用tab切换的api
								uni.switchTab({
									url: "../me/me"
								});
							}
						});
						
					}
				})
			},
			formSubmit (e) {
				var self = this;
				var username = e.detail.value.username;
				var password = e.detail.value.password;
				var result = this.regPhone();
				if(!result){
					return false;
				}
				if(self.loginType == 0 && self.authcode == ''){
					this.$common.errorToShow('短信验证码不能为空')
					return false;
				}
				if(self.password == ''){
					this.$common.errorToShow('密码不能为空')
					return false;
				}
				if(self.loginType == 0 && self.password != self.confirmpassword){
					this.$common.errorToShow('两次输入密码不一至')
					return false;
				}
				
				var userInfo = {
					username:username,
					password:password
				}
				var data = {
					'LOGIN_ID':self.loginType==1?self.$md5(self.$common.sys.key+username).toUpperCase():username,
					'LOGIN_PWD':self.$md5(self.$common.sys.key+password).toUpperCase(),
					'SIGN':self.loginType,
					'VERCODE':self.authcode
				};
				var url = 'S1008';
				
				// 发起注册/登录的请求
				self.$request(url,data,'POST',
					function(res){
						if(res.data.CODE==0){
							uni.setStorageSync('isLogin',true);
							uni.setStorageSync('userInfo',userInfo);
							self.$request('S1010',null,'POST',
							function(res1){
								console.log("调用成功",res1);
								if(res1.data.CODE==0){
									uni.setStorageSync('userInfo',Object.assign({},userInfo,res1.data.DATA));
									if('loginInfo',res1.data.DATA.IS_WS=='0'){
										uni.navigateTo({
											url:"../fillInfo/fillInfo",
										})
									}else{
										uni.switchTab({
											url:'../index/index'
										});
									}
								}else{
									uni.navigateTo({
										url:"../fillInfo/fillInfo",
									})
								}
							},
							function(err1){
								console.log("调用失败",err1);
							},
							function(msg1){
								console.log("调用完成",msg1);
							})
							
						}else{
							self.$common.errorToShow(res.data.MSG)
						}
					},
					function(err){
						// console.log("调用失败",err)
					},
					function(msg){
						// console.log("调用完成",msg)
					})
					
					// request(url,{},"POST",)
			}
		}
	}
</script>

<style>
	.body{
		padding:0 20upx;
	}
	/* 头像 start */
	.face-wapper {
		display: flex;
		flex-direction: row;
		justify-content: center;
		
		margin-top: 120upx;
		margin-bottom: 120upx;
	}
	
	.face {
		width: 160upx;
		height: 160upx;
	}
	/* 头像 end */
	.getYzm {
		width: 190upx;
		height: 63upx;
		line-height: 63upx;
		background: #559DFF;
		border-radius: 10upx;
		text-align: center;
		color: #FFFFFF;
		font-size: 24upx;
	}
	
	/* 注册登录 start */
	.info-wapper {
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		border-bottom: solid 1px #DBDBDA;
		padding-bottom: 20upx;
	}
	
	.words-lbl {
		color: #808080;
	}
	
	.input {
		width: 500upx;
		margin-left: 40upx;
	}
	
	.graywords {
		color: #EAEAEA;
	}
	
	/* 注册登录 end */
	
	/* 第三方登录 start */
	.third-wapper {
		width: 100%;
		/* 固定底部 */
		/* bottom: 0;
		position: fixed; */
		
		margin-top: 60upx;
		
	}
	
	.third-line {
		display: flex;
		flex-direction: row;
		justify-content: center
	}
	.line{
		width: 100%;
		height: 1px;
		background-color: #A9A9A9;
	}
	.third-words {
		color: #A9A9A9;
		font-size: 13px;
		
		display: flex;
		flex-direction: column;
		justify-content: center;
	}
	
	.single-line {
		padding: 15upx 20upx;
		width: 25%;
		align-items: center;
	}
	
	.third-icos-wapper {
		margin-top: 30upx;
		
		display: flex;
		flex-direction: row;
		justify-content: center
	}
	
	.third-ico {
		width: 60upx;
		height: 60upx;
	}
	
	.third-btn-ico {
		/* background-image:url(http://122.152.205.72:88/group1/M00/00/05/CpoxxFxFO-yAOjTaAAATCIZEzRU503.png); */
		background: url(../../static/image/weixin.png);
		width: 60upx;
		height: 60upx;
		background-color: white;
		background-size: 60upx 60upx;
		background-repeat:no-repeat;
		border:none;
		padding: 0;
	}
	
	button::after{
		border: none;
	}
	
	.method{
		width: 90%;
		margin: 20upx auto;
		display: flex;
		justify-content: space-between;
		color: #909399;
		font-size:12px;
	}

	/* 第三方登录 end */
</style>
